<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>正式学员报表-柱状图</title>
    <script>
        window.onload = function () {
            var chart = echarts.init(document.getElementById("chart"));
            var option = {
                title: {
                    text: "销售报表-柱状图",
                    x: 'center',
                    subtext: ${groupBy}
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                tooltip: {
                    show: true
                },
                legend: {
                    data: ['销量总额'],
                    x: 'left'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ${groupTypes}
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        "name": "已付总款",
                        "type": "bar",
                        "data": ${totalPaid},
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        "name": "未付总款",
                        "type": "bar",
                        "data": ${debt},
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }

                ]
            };
            // 为echarts对象加载数据
            chart.setOption(option);
        }
    </script>
</head>
<body>
<div id="chart" style="height:580px;width: 780px;"></div>
<script src="/static/plugins/echarts/echarts-all.js"></script>
</body>
</html>
